<template>
  <QuestionBlock
    v-if="ttsaStore.mode === MODE.QA && ttsaStore.controller && !asr.touchStatus && !ttsaStore.voiceLoading && !inputVisible && questionsList.length"
    @item-click="onChart"
  />
  <transition
    name="translate-bottom"
    mode="out-in"
  >
    <div
      v-if="ttsaStore.controller"
      :class="$style['video-controller']"
      class="z-200"
    >
      <controller-button
        v-if="ttsaStore.mode !== MODE.QA"
        :names="['pause', 'play']"
        :status="ttsaStore.paused"
        @click="onHandPaused"
      />
      <controller-button
        v-else
        :names="['', 'back']"
        :status="true"
        @click="onHandQa"
      />
      <div
        v-if="ttsaStore.mode === MODE.QA"
        :class="$style['controller-input']"
      >
        <transition
          name="zoom"
          mode="out-in"
        >
          <controller-input-asr v-if="asrType" />
          <controller-input-text v-else />
        </transition>
      </div>
      <div
        v-else
        :class="$style['controller-input']"
      >
        <controller-current class="-ml-5px" />
        <controller-button
          :names="['', 'menu']"
          :status="true"
          @click="useMenuTree()"
        />
      </div>
      <controller-button
        v-if="ttsaStore.mode !== MODE.QA"
        :names="['asr', '']"
        :status="false"
        @click="onHandQa"
      />
      <controller-button
        v-else
        :names="['asr', 'text']"
        :status="asrType"
        @click="onHandAsr"
      />
    </div>
  </transition>
</template>

<script
  lang="ts"
  setup
  name="VideoController"
>
import { MODE } from '@/constants/ttsa'
import useController from '@/hooks/controller/useController'
import { useMenuTree } from '@/utils/comps'
import { useAsrStore } from '@/store/asr'

const { ttsaStore, onHandPaused, onChart, asrType, onHandAsr, inputVisible, onHandQa } = useController()

const questionsList = computed(() => ttsaStore.questions)

const asr = useAsrStore()

</script>

<style
  module
  lang="scss"
>.video-controller {
  @apply absolute w-full bottom-0 left-0 flc pb-4px;
  height: 88px;

  &::before {
    content: '';
    @apply absolute top-0 left-0 bottom-0 right-0 z-0 backdrop-filter backdrop-blur-10;
    background: linear-gradient(180deg, rgba(190, 209, 227, 0.5) 0%, #9EB5D1 100%);
    border-radius: 21px 21px 0px 0px;
    border: 1px solid rgba(220, 240, 252, 1);
  }
}

.controller-input {
  @apply flc;
  width: 195px;
  margin: 0 19px;
}</style>
